<template>
  <div class="good-category">
    <header>
        <a href="javascript:;" class="list-icon1" @click="jump">
            <i class="iconfont icon-up21"></i>
        </a>
        <a href="javascript:;" class="list-icon2">
            <i class="iconfont icon-kefu1"></i>
        </a>
        <h1>商品类目</h1>
    </header>
    <section>
      <ul class="category-list">
        <li class="category-list1" @click="handleGoods(1)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>鲜花</p>
            <span>鲜花速递 - 全国鲜花速递服务提供商</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
        <li class="category-list2" @click="handleGoods(2)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>蛋糕</p>
            <span>蛋糕速递 - 生日蛋糕、纪念蛋糕、庆祝蛋糕</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
        <li class="category-list3" @click="handleGoods(3)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>开业花篮</p>
            <span>开业花篮 - 商务花礼、开业花篮、开张花篮</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
        <li class="category-list4" @click="handleGoods(4)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>绿植花卉</p>
            <span>绿植花卉 - 室内绿植、绿色植物、乔迁送礼</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
        <li class="category-list5" @click="handleGoods(5)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>香皂花礼盒</p>
            <span>香皂花礼盒 - 香皂花玫瑰礼盒、香皂玫瑰花</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
        <li class="category-list6"  @click="handleGoods(6)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>保鲜花</p>
            <span>保鲜花 - 永生花、保鲜玫瑰花、进口保鲜花</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
        <li class="category-list7" @click="handleGoods(7)">
          <div class="cate-img"></div>
          <div class="cate-text">
            <p>礼品</p>
            <span>礼品 - 礼物、创意礼品、创意摆件、毛绒玩具</span>
          </div>
          <div>
            <i class="iconfont icon-up11"></i>
          </div>
        </li>
      </ul>
    </section>
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
export default {
  components: {
    Footer,
  },
  methods: {
    handleFlower() {},
    jump() {
      this.$router.push("/");
    },
    handleGoods(n) {
      this.$router.push({
        name: "GoodList",
        params: {
          num: n,
        },
      });
    },
  },
};
</script>

<style scoped src="../assets/css/goodCategory.css"></style>
<style lang="less" scoped>
@import url("../assets/font/iconfont.css");
</style>